import { Canvas ,} from "@react-three/fiber";
import { Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { Scence } from "./components/Scence";
import { Suspense, useEffect, useState } from "react";
import { Model } from "./components/Model";
import * as THREE from "three";
// 引入dat.gui.js的一个类GUI
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

const Box = styled.div`
  width: 100%;
  height: 800px;
  position: relative;
`;

export function HuanJingTieTu() {
  const [evMap, setEvMap] = useState<THREE.DataTexture | undefined>(undefined);
  const [gui, setGui] = useState<GUI>(new GUI());
  /**
   * 场景获取环境贴图
   */
  const getEvMap = (data: THREE.DataTexture | undefined) => {
    setEvMap(data);
  };
  useEffect(() => {
    return () => {
      gui.domElement.remove();
      // 销毁gui
      gui.destroy();
    };
  }, []);
  return (
    <Fragment>
      <Box>
        <Canvas>
          <Suspense fallback={<div>Loading...</div>}>
            {/* 场景 */}
            <Scence getEvMap={getEvMap} gui={gui}></Scence>
            {/* 相机 */}
            {/* 加载模型 */}
            <Model evMap={evMap} gui={gui}></Model>
          </Suspense>
        </Canvas>
        {/* 调试工具 */}
        {/* <div dangerouslySetInnerHTML={{ __html: gui.domElement }}></div> */}
      </Box>
    </Fragment>
  );
}
